<template>
  <div>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-form class="verify-form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
        <el-form-item label="商品类别" prop="ctgId">
          <el-select v-model="dataForm.ctgId" placeholder="请选择" :disabled="disable">
            <el-option v-for="item in ctgOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input v-model="dataForm.supplyName" :disabled="disable">
            <el-button slot="append" @click="openDialog('supply')" v-if="!dataForm.id">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品品种">
          <el-input v-model="dataForm.brandName" :disabled="disable">
            <el-button slot="append" @click="openDialog('brand')" v-if="!dataForm.id">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="viewGoodsName">
          <el-input v-model="dataForm.viewGoodsName" :disabled="disable">
            <el-button slot="append" @click="openDialog('goods')" v-if="!dataForm.id">选择</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="最大折扣率(0-1)" prop="maxRate">
          <el-input v-model="dataForm.maxRate" placeholder="最大折扣率(0-1)"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input v-model="dataForm.memo" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
      </span>
    </el-dialog>
    <!-- 商品制造商信息 -->
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    <!-- 商品品种信息 -->
    <search-brand v-if="brandVisible" ref="brandDialog" @refreshData="getBrandData"></search-brand>
    <!-- 商品信息 -->
    <goods-search-single v-if="goodsVisible" ref="goodsDialog" @updateForm="getGoodsData"></goods-search-single>
  </div>
</template>

<script>
  import {
    getObj,
    addObj,
    putObj
  } from '@/api/eims/maxdiscount'

  import { fetchCtgList } from '@/api/eims/ctg' // 商品类别信息
  import SearchSupply from '@/components/business/SearchSupply' //商品制造商
  import SearchBrand from '@/components/business/SearchBrand' //商品品种
  import GoodsSearchSingle from './goods-search-single' //商品名称

  export default {
    data() {
      var exchangeRateCheck = (rule, value, callback) => {
        let numPattern = /^-?\d*\.?\d+$/
        if (!numPattern.test(value)) {
          callback(new Error("请输入阿拉伯数字,含小数，范围(0-1)"));
        }
        if (value > 1 || value < 0) {
          callback(new Error("请输入0-1之间数字"));
        } else {
          callback()
        }
      };
      return {
				ischeck: false,
        disable: false,
        visible: false,
        ctgOptions: [],
        dataForm: {
          id: 0,
          ctgId: '',
          supplyId: '',
          supplyName: '',
          brandId: '',
          brandName: '',
          goodsId: '',
          goodsName: '',
          viewGoodsName: '',
          maxRate: '',
          memo: ''
        },
        supplyVisible: false,
        brandVisible: false,
        goodsVisible: false,
        dataRule: {
          ctgId: [{
            required: true,
            message: '商品类别id不能为空',
            trigger: 'blur'
          }],
          maxRate: [{
              required: true,
              message: '最大折扣率不能为空',
              trigger: 'blur'
            },
            {
              validator: exchangeRateCheck
            }
          ],
        }
      }
    },
    components: {
      SearchSupply,
      SearchBrand,
      GoodsSearchSingle,
    },
    methods: {
      init(id) {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.dataForm.id = id || 0
        this.disable = (id) ? true : false
        this.visible = true
        fetchCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data.records
          }else{
            this.$message.error(response.data.msg)
          }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
								this.ischeck = false
              }).catch(() => {
								this.ischeck = false
							})
            } else {
              addObj(this.dataForm).then(response => {
								if(response.data.code == '0'){
								  this.$message.success('添加成功')
								  this.visible = false
								  this.$emit('refreshDataList')
								}else{
								  this.$message.error(response.data.msg)
								}
								this.ischeck = false
              }).catch(() => {
								this.ischeck = false
							})
            }
          }else{
						this.ischeck = false
					}
        })
      },

      //  打开弹窗
      openDialog(name) {
        if (name == 'supply') {
          if (!this.dataForm.ctgId) {
            this.$message.warning('请先选择商品类别')
            return
          }
          let data = {
            ctgId: this.dataForm.ctgId
          }
          this.supplyVisible = true
          this.$nextTick(() => {
            this.$refs.supplyDialog.init(data)
          })
        } else if (name == 'brand') {
          if (!this.dataForm.supplyId) {
            this.$message.warning('请先选择所属制造商')
            return
          }
          let data = {
            ctgId: this.dataForm.ctgId,
            supplyId: this.dataForm.supplyId
          }
          this.brandVisible = true
          this.$nextTick(() => {
            this.$refs.brandDialog.init(data)
          })
        } else if (name == 'goods') {
          if (!this.dataForm.ctgId) {
            this.$message.warning('请先选择商品类别')
            return
          }
          if (!this.dataForm.supplyId) {
            this.$message.warning('请先选择所属制造商')
            return
          }
          if (!this.dataForm.brandId) {
            this.$message.warning('请先选择所属品种')
            return
          }
          let params = {
            ctgId: this.dataForm.ctgId,
            supplyId: this.dataForm.supplyId,
            brandId: this.dataForm.brandId,
            ctgName: this.dataForm.ctgName,
            supplyName: this.dataForm.supplyName,
            brandName: this.dataForm.brandName
          }
          let data = {
            params: params,
            data: [],
            disable: true
          }
          this.goodsVisible = true
          this.$nextTick(() => {
            this.$refs.goodsDialog.init(data)
          })
        }
      },

      //  获取制造商数据
      getSupplyData(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
      },
      //  获取商品品种信息
      getBrandData(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
      },
      //获取商品信息
      getGoodsData(data) {
        this.dataForm.goodsId = data.id
        this.dataForm.viewGoodsName = data.viewGoodsName
      }
    }
  }
</script>
